<template>
	<div class="form-table">
		<el-table :data="formTableValue" ref="tableRef" border stripe>
			<el-table-column type="index" width="50" fixed="left">
				<template #header>
					<el-button v-if="!hideAdd" type="primary" :icon="Plus" size="small" circle @click="rowAdd"></el-button>
				</template>
				<template #default="scope">
					<div :class="['form-table-handle', { 'form-table-handle-delete': !hideDelete }]">
						<span>{{ scope.$index + 1 }}</span>
						<el-button v-if="!hideDelete" type="danger" :icon="Delete" size="small" plain circle @click="rowDel(scope.row, scope.$index)"></el-button>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="" width="50" v-if="dragSort">
				<template #default>
					<div class="move" style="cursor: move">
						<SvgIcon name="ele-Rank" size="18" />
					</div>
				</template>
			</el-table-column>
			<slot></slot>
			<template #empty>
				{{ placeholder }}
			</template>
		</el-table>
	</div>
</template>
<script lang="ts" setup>
import { ref, computed, onMounted, nextTick } from 'vue';
import Sortable from 'sortablejs';
import { Plus, Delete } from '@element-plus/icons-vue';

const props = defineProps({
	modelValue: {
		type: Array,
		required: true,
		default: () => [],
	},
	// 表格数据参数
	template: {
		type: Object,
		required: false,
		default: () => {},
	},
	// 提示信息
	placeholder: {
		type: String,
		required: false,
		default: '',
	},
	// 是否拖拽排序
	dragSort: {
		type: Boolean,
		required: false,
		default: true,
	},
	// 是否隐藏添加按钮
	hideAdd: {
		type: Boolean,
		required: false,
		default: false,
	},
	// 是否显示隐藏按钮
	hideDelete: {
		type: Boolean,
		required: false,
		default: false,
	},
});

const tableRef = ref(null);

const emit = defineEmits(['update:modelValue', 'confirm']);

const formTableValue = computed({
	get() {
		return props.modelValue;
	},
	set(value) {
		emit('update:modelValue', value);
	},
});

// 拖拽行
const rowDrag = () => {
	let el = tableRef.value.$el.querySelector('.el-table__body-wrapper tbody');
	Sortable.create(el, {
		handle: '.move',
		animation: 200,
		delay: 0,
		onEnd(event) {
            // 拖拽重新排序
			formTableValue.value.splice(event.newIndex, 0, formTableValue.value.splice(event.oldIndex, 1)[0]);
			const newValue = formTableValue.value.slice(0);
			formTableValue.value = [];
			nextTick(() => {
				formTableValue.value = newValue;
			});
		},
	});
};

// 新增行
const rowAdd = () => {
	const temp = JSON.parse(JSON.stringify(props.template));
	formTableValue.value.push(temp);
};

// 删除行
const rowDel = (row, index) => {
	formTableValue.value.splice(index, 1);
};

// 外部插入行
const pushRow = (row) => {
	const temp = row || JSON.parse(JSON.stringify(props.template));
	formTableValue.value.push(temp);
};

// 外部删除行
const deleteRow = (index) => {
	formTableValue.value.splice(index, 1);
};

defineExpose({
	pushRow,
	deleteRow,
});

onMounted(() => {
	if (props.dragSort) rowDrag();
});
</script>

<style lang="scss" scoped>
.form-table {
	width: 100%;

	.form-table-handle {
		text-align: center;

		span {
			display: inline-block;
		}

		button {
			display: none;
		}
	}

	.hover-row .form-table-handle-delete {
		span {
			display: none;
		}
		button {
			display: inline-block;
		}
	}

	.move {
		text-align: center;
		font-size: 14px;
		margin-top: 6px;
	}
}
</style>
